<template>
	<view class="teleLogin">
		<view class="row">
			<view>
				<text>手机号码</text>
				<input style="font-size: 28rpx" type="number" placeholder="请输入手机号" v-model="phoneNumber">
			</view>
			<view @click="obtain" class="verificationCode">
				{{msg}}
			</view>
		</view>
		<view class="row">
			<view>
				<text>验证码</text>
				<input style="font-size: 28rpx" type="text" placeholder="请输入验证码" v-model="captcha">
			</view>
			<image :src=" url" v-if="url"></image>
		</view>
		<view @click="ok" class="ok">
			登陆
		</view>

		<!-- 弹窗 -->
		<uni-popup ref="popup" type="message">
			<uni-popup-message :type="msgType" :message="msgText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import {
		http
	} from '../../../utils/http.js'
	export default {
		data() {
			return {
				url: '',
				msg: '获取验证码',
				phoneNumber: '',
				captcha: '',
				uuid: '',
				msgType: '',
				msgText: ''
			}
		},
		methods: {
			obtain() {
				this.msg = '重新获取'
				// this.url = 'http://172.16.142.23:8077/sys/getVerify'
				http({
					url: '/sys/getVerify',
				}).then(({
					data
				}) => {
					console.log(data)
					this.url = "data:image/png;base64," + data.img
					this.uuid = data.uuid
				})
			},
			ok() {
				if (this.phoneNumber == '' || this.captcha == '') {
					this.msgType = 'warn'
					this.msgText = '账号验证码不能为空！'
					this.$refs.popup.open()
				} else {
					http({
						url: '/householdManagement/login',
						params: {
							phoneNumber: this.phoneNumber,
							uuid: this.uuid,
							captcha: this.captcha
						}
					}).then((res) => {
						console.log(res)
						if (res.code == 0) {
							uni.setStorage({
								key: 'list',
								data: res.data.list[0],
								// success() {}
							});
							this.msgType = 'success'
							this.msgText = '登陆成功'
							this.$refs.popup.open()
							setTimeout(() => {
								wx.switchTab({
									url: '/pages/component/home'
								})
							}, 1000)
						} else {
							this.msgType = 'error'
							this.msgText = '账号验证码错误！'
							this.$refs.popup.open()
						}
					})
				}
			}
		},
	}
</script>

<style lang="less" scoped>
	.teleLogin {

		// 成功弹框样式
		.popup-success {
			color: #fff;
			background-color: #e1f3d8;
			text-align: center;
		}

		// 失败弹框样式
		.popup-error {
			color: #fff;
			background-color: #fde2e2;
		}

		// 警告弹框样式
		.popup-warn {
			color: #fff;
			background-color: #faecd8;
		}

		margin-top: 50rpx;

		.row {
			display: flex;
			align-items: center;
			height: 120rpx;
			padding-left: 50rpx;
			border: 1px solid #eee;

			view:nth-child(1) {
				width: 460rpx;
				display: flex;
				justify-content: space-between;
			}

			text,
			input {
				font-size: 30rpx;
			}

			.verificationCode {
				padding: 0 16rpx 0 16rpx;
				height: 50rpx;
				background: #f0f0f0;
				color: #989898;
				font-size: 26rpx;
				text-align: center;
				line-height: 50rpx;
				margin-left: 20rpx;
			}

			image {
				width: 200rpx;
				height: 60rpx;
			}
		}

		.ok {
			width: 240rpx;
			height: 80rpx;
			background: #07c160;
			color: white;
			font-size: 36rpx;
			text-align: center;
			line-height: 80rpx;
			border-radius: 6px;
			margin: 70rpx auto;
		}
	}
</style>
